<template>
  <div class="config">
    <div class="result">
      <div class="result-header">
        <span>布局设置:</span>
        <span :class="{'active':size==4}" @click="chooseSize(4)">4列</span>
        <span :class="{'active':size==3}" @click="chooseSize(3)">3列</span>
        <span :class="{'active':size==2}" @click="chooseSize(2)">2列</span>
        <!-- <span class="fr">删除</span>
        <span class="fr">清空</span>
        <span class="fr">合并</span> -->
      </div>
      <div class="result-contain">
        <el-row :gutter="20" id="sortable">
          <el-col @click.native="config(index)" :id="index" :span="item.col*col>24?24:item.col*col" v-for="(item,index) in list" :key="index">
            <div class="components" :class="{'wrapper':isPreview}" :is="item.type" :data="item"></div>
          </el-col>
        </el-row>
      </div>
      <div class="result-footer">
        <el-button type="info" @click.native="preview" v-text="isPreview?'编辑':'预览'"></el-button>
        <el-button type="success" @click.native="save">保存</el-button>
      </div>
    </div>
    <div class="operation">
      <div class="tabs">
        <span :class="{'active':tab==1}" @click="tabChange(1)">组件面板</span>
        <span :class="{'active':tab==2}" @click="tabChange(2)">属性</span>
      </div>
      <div class="item comp" v-show="tab==1">
        <!-- <span @click="addComp('blank')"><i></i>blank</span> -->
        <span @click="addComp('mySelect')"><i class="select"></i>select</span>
        <span @click="addComp('myButton')"><i class="button"></i>button</span>
        <span @click="addComp('myInput')"><i class="text"></i>text</span>
        <span @click="addComp('myFile')"><i class="file"></i>file</span>
        <span @click="addComp('myHr')"><i class="hr"></i>hr</span>
        <span @click="addComp('myTextArea')"><i class="textarea"></i>textarea</span>
        <span @click="addComp('myImage')"><i class="image"></i>image</span>
        <span @click="addComp('myCheckbox')"><i class="check"></i>check</span>
        <span @click="addComp('myRadio')"><i class="radio"></i>radio</span>
      </div>
      <div class="item attr" v-show="tab==2">
        <div class="name" v-if="tem">
          <div v-for="(item,key) in tem" v-text="key+':'+ item"></div>
          宽度<el-input-number v-model="tem.col" :min="1" :max="size" size="small"></el-input-number>
          高度<el-input-number v-model="tem.height" :min="1" :max="5" size="small"></el-input-number>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import myInput from './Inp.vue'
import myFile from './Fil.vue'
import mySelect from './Sel.vue'
import myButton from './Btn.vue'
import myHr from './lineText.vue'
import myTextArea from './textArea.vue'
import myImage from './Img.vue'
import myCheckbox from './Check.vue'
import myRadio from './Radio.vue'
import Sort from 'sortablejs'
export default {
  name: 'router-list',
  data() {
    return {
      size: 4,//列数
      // activeName: 'attr',
      tab: 1,//操作面板tab flag
      isPreview: false,//是否预览
      list: [],//生成组件列表
      tem: null,//当前选中组件
      temIndex:null//当前选中组件下标
    }
  },
  computed: {
    col: function() {//每列占比计算
      return 24 / Number(this.size);
    }
  },
  components: { myInput, mySelect, myButton, myHr, myTextArea, myImage, myCheckbox, myRadio, myFile },
  methods: {
    chooseSize(size) {//列数选择
      this.size = size;
      console.log(this.col, this.list)
    },
    addComp(type) {//添加组件
      if (type == 'blank') return;
      if (type == 'myHr') {
        this.list.push({ col: 4, height: 3, name: '姓名', value: '111', type: type })
      } else if(type == 'myFile' || type == 'myImage' || type == 'myTextArea') {
        this.list.push({ col: 1, height: 2, name: '年龄', value: '111', type: type })
      }else{
        this.list.push({ col: 1, height: 1, name: '年龄', value: '111', type: type })
      }

    },
    tabChange(tab) {//操作面板tab切换
      this.tab = tab;
      console.log(this.list)
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },
    config(index) {//组件操作切换
      console.log(index)
      this.tem = this.list[index];
      this.temIndex = index;
      this.tab = 2;
      if (this.list[index].type == "myHr") return;
    },
    preview() {//预览
      this.isPreview = !this.isPreview;
    },
    save(){//保存
      this.$confirm('您将执行保存操作 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.$message({
          type: 'success',
          message: '保存成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消保存'
        });
      });
    },
    toSort() {//排序初始化
      var self = this;
      var dom = document.getElementById('sortable');
      new Sort(dom, {
        sort: true,
        // disabled:true,
        ghostClass: 'ghostClass',
        fallbackClass: 'fallbackClass',
        onChoose: function( /**Event*/ evt) {
          console.log('onChoose')
          console.log(evt.item.id)
        },
        onEnd: function( /**Event*/ evt) {
          console.log(evt.oldIndex, evt.newIndex)
        }
      });
    }
  },
  updated() {
    // console.log($('.components'))
  },
  mounted() {
    this.toSort();
    // alert(this.isMac())
  },
  destroy(){
    console.log('delete')
  }
}

</script>
<style lang="less">
.config {
  width: 100%;
  display: flex;
  .result {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20px;
    .result-header {
      span {
        display: inline-block;
        font-size: 16px;
        line-height: 30px;
        padding: 0 10px;
        cursor: pointer;
        &:first-child {
          cursor: auto;
          padding: 0;
        }
      }
      .active {
        color: red;
      }
      .fr {
        float: right;
      }
    }
    .result-contain {
      flex: 1; // background: orange;
      overflow-x: hidden;
      overflow-y: auto;
      .el-row {
        .el-col {
          margin-top: 8px;
          .components{
            border: 1px dashed #ccc;
          }
          div.wrapper {
            border: 1px green solid;
          }
        }
        .active {
          background: #e2e2e2;
        }
        .ghostClass {
          border: 1px solid red;
        }
        .fallbackClass {
          border: 1px solid green;
        }
      }
    }
    .result-footer {
      height: 70px;
      .el-button {
        display: inline-block;
        width: 100px;
      }
    }
  }
  .operation {
    width: 340px;
    background: #e9e9e9;
    display: flex;
    flex-direction: column;
    .tabs {
      height: 34px;
      font-size: 0;
      border: 1px solid #bababa;
      span {
        display: inline-block;
        width: 100px;
        height: 100%;
        border-right: 1px solid #bababa;
        text-align: center;
        line-height: 33px;
        font-size: 14px;
        cursor: pointer;
        &.active {
          background: #d0d0d0;
        }
      }
    }
    .item {
      flex: 1;
    }
    .attr {
      // background: salmon;
    }
    .comp {
      // background: green;
      font-size: 0;
      padding: 12px 20px 20px 20px;
      span {
        display: inline-block;
        width: 140px;
        height: 34px;
        background: #fff;
        margin-top: 8px;
        font-size: 14px;
        text-indent: 16px;
        line-height: 34px;
        cursor: pointer;
        i {
          display: inline-block;
          width: 14px;
          height: 14px;
          margin-top: 10px;
          margin-right: 10px;
          vertical-align: top;
          background: url('../../assets/config.png') no-repeat 0 0;
          background-size: 28px 112px;
        }
        i.text-auto {
          background-position: -14px 0;
        }
        i.select {
          background-position: 0 -14px;
        }
        i.button {
          background-position: -14px -14px;
        }
        i.text {
          background-position: 0 -28px;
        }
        i.file {
          background-position: -14px -28px;
        }
        i.hr {
          background-position: 0 -42px;
        }
        i.textarea {
          background-position: -14px -42px;
        }
        i.image {
          background-position: -14px -56px;
        }
        i.check {
          background-position: 0 -70px;
        }
        i.radio {
          background-position: 0 -56px;
        }
        &:nth-of-type(2n) {
          margin-left: 20px;
        }
      }
    }
  }
}

</style>
